<template>
    <div class="row online">
        <div class="dialog">
            <div class="head-a">
                <a class="head-back" @click="backa"></a>
                <span>在线咨询</span>
                <div class="head-btn"></div>
            </div>
            <!--下面-->
            <div class="diabto diabtofi">
                <div class="diabtoa">
                    <div class="diabtoi">
                        <input class="diabtoii" v-model="content" type="text" placeholder="请输入文字咨询">
                    </div>
                    <!--<div class="diabtob">-->
                    <!--<input id="fileBtn" type="file" accept="image/*" multiple="multiple"/>-->
                    <!--</div>-->
                    <button @click="send" class="diabtoc">发送</button>
                </div>
            </div>
            <!--<div class="" style="height: 4.4rem;"></div>-->
            <div class="dialoge po" v-for="item in ldata ">
                <!-- left -->
                <div v-if="item.type==1">
                    <div class='dialogel'><img src='../../common/image/dialogt.png'></div>
                    <div class='dialoger'>
                        <div class='dialogerl'>
                            <span>{{item.tiele}}</span>
                            <img src='../../common/image/dialogl.png' class='dialogeri'>
                        </div>
                    </div>
                </div>
                <!-- left -->
                <!-- right -->
                <div v-if="item.type==2">
                    <div class='dialogr'><img src="../../common/image/dialogt.png" alt=""></div>
                    <div class='dialogerrw'>
                        <div class='dialogerr'>
                            <div class='dialogerlr'><span>{{item.tiele}}</span>
                                <img src='../../common/image/dialogr.png' class='dialogerir'>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- right -->
            </div>
        </div>
    </div>
</template>
<script>
    import {Toast,Indicator} from 'mint-ui';
    export default {
        name: "online",
        data() {
            return {
                ldata:[
                    {index: 0,tiele:'我是小明',type:1,show: false},
                    {index: 1,tiele:'我是小明',type:2,show: false},
                    {index: 2,tiele:'我也是小明我也是小明我也是小明我也是小明',type:2,show: false},
                    {index: 3,tiele:'我都是小明',type:1,show: false},
                    {index: 4,tiele:'我全是小明',type:1,show: false},
                ],
                content:''
            }
        },
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created() {
            // console.log(
            //   // this.$route.params.reg_numb,
            //   // this.$route.params.base_num,
            //   // this.$route.params.super_num,
            //   // this.$route.params.join_num,
            //   this.$route.params.meeting
            // )
            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount() {
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted() {
            // console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            // console.log(document.getElementsByClassName("myp")[0])
            // console.log('可以在这里操作真实dom等事情...')
            //  let officer_li = document.getElementsByClassName('officer-li');
            // officer_li.onclick(function() {
            //   for (let i = 0; i<officer_li.length; i++) {
            //    console.log(11)
            //   }
            // })

            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'
            //    }.bind(this),500)
        },
        methods: {
            backa(){
                this.$router.go(-1)
            },
            send(){
                if (this.content==''){
                    Toast({
                        message: '请输入内容',
                        duration: 3000
                    });
                }else {
                    this.ldata.push( {index: 4,tiele:this.content,type:2,show: false})
                    this.content=''
                    document.body.scrollTop = document.body.scrollHeight;
                    var fluiHeight = document.getElementsByClassName('dialog')[0].scrollHeight;
                    document.documentElement.scrollTop=fluiHeight
                }
                console.log(this.content)
            }
        },
        watch: {

        },
        beforeUpdate: function () {
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated: function () {
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy: function () {
            // console.log('beforeDestory:销毁前执行（方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
            document.querySelector('body').setAttribute('style', '')
        },
        destroyed: function () {
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style scoped>
    body {
        background-color: #f5f5f5;
    }
    .online{
        background-color: #f5f5f5;
    }
    .head-a {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        line-height: 80px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        background-color: #699ece;
        background: linear-gradient(to right,#557ae4, #8bbadd);
        z-index: 11;
    }
    .head-back {
        position: absolute;
        left: 20px;
        top: 0;
        width: 20px;
        height: 100%;
        background: url(../../common/image/icon8.png) no-repeat center center;
        background-size: contain;
    }
    .dialog{
        padding-right: 20px;
        padding-left: 20px;
        padding-top:90px;
        padding-bottom: 100px;
    }
    .dialogr{
        position:absolute;
        top:0;
        right:0;
        width:100px;
        height:100px;
        overflow:hidden;
        border-radius:50%;
    }
    .dialogr img{
        width:100px;
        height:100px;
        border-radius:50%;
    }
    .dialogerrw {
        padding-top: 20px;
    }
    .dialoge{
        position: relative;
        margin-top:40px;
    }
    .dialogel{
        position:absolute;
        top:0;
        left:0;
        width:100px;
        height:100px;
        overflow:hidden;
        border-radius:50%;
    }
    .dialogel img{
        width:100px;
        height:100px;
    }
    .dialoger{
        margin-left:140px;
        font-size: 30px;
        padding-top: 20px;
    }
    .dialogerl{
        position: relative;
        border-radius: 20px;
        padding:20px;
        background-color: #fff;
        display: inline-block;
        word-break: break-all;
    }
    .dialogeri{
        width: 40px;
        height: 34px;
        position: absolute;
        top: 26px;
        left: -32px;
    }
    .dialogerr{
        margin-right:140px;
        font-size:30px;

    }
    .dialogerlr{
        float:right;
        position: relative;
        border-radius: 20px;
        padding:20px;
        background-color: #557ae4;
        display: inline-block;
        word-break: break-all;
        color: #fff;
        font-size: 30px;
    }
    .dialogerir{
        width: 40px;
        height: 34px;
        position: absolute;
        top: 26px;
        right: -32px;
    }
    .dialogerrw{
        clear: none;
        overflow: hidden;
    }
    .diabto{
        width: 100%;
        height: 90px;
        background-color: #fff;
        z-index: 50;
        font-size: 26px;
    }
    .diabtofi{
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .diabtoad{
        position: fixed;
        top: 78%;
        left: 0;
    }
    .diabtoa{
        padding: 15px 30px;
        clear: none;
        overflow: hidden;
    }
    .diabtoi{
        width: 560px;
        height: 60px;
        overflow: hidden;
        float: left;
    }
    .diabtoii{
        width: 540px;
        padding-left: 20px;
        height: 58px;
        border: none;
        outline: none;
        border-bottom: 1px solid #b3b3b3;/*no*/
    }
    .diabtob{
        float: left;
        width:0.6rem;
        height: 0.6rem;
        /*background: url("../images/pic.png");*/
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        margin-left: 30px;
        position: relative;
        overflow: hidden;
    }
    .diabtoc{
        float: right;
        display: block;
        width: 100px;
        height: 60px;
        line-height: 60px;
        /*border: 1px solid #b3b3b3;!*no*!*/
        border: none;
        border-radius: 10px;
        outline: none;
        padding: 0;
        background-color: #557ae4;
        color: #fff;
        font-weight: bold;
    }
    #fileBtn{
        display: block;
        width: 60px;
        height: 60px;
        position: absolute;
        left:0;
        top:0;
        opacity: 0;
        z-index: 11;
        overflow: hidden;


    }
    .dialogimg{
        width: 300px;
        height: 400px;
        overflow: hidden;
    }
</style>
